<template>
    <div class="rate-wrap">
        <div class="rate-item"><span>订单完成率</span><span class="num">{{ data.orderCompletionRate * 100 }} %</span></div>
        <div class="rate-item"><span>=</span></div>
        <div class="rate-item"><span>有效订单</span><span class="num">{{ data.validOrderCount }}</span></div>
        <div class="rate-item"><span>/</span></div>
        <div class="rate-item"><span>订单总数</span><span class="num">{{ data.totalOrderCount }}</span></div>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="order" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">

//按需引入
import { onMounted, watch, ref } from "vue"
import * as statisticAPI from '@/api/admin/statistic'
import { dayjs } from "element-plus"
import echarts from '@/util/echart'
import type { OrderReportVO } from "@/api/admin/statistic/type";

const data = ref<OrderReportVO>({
    totalOrderCount: 0,
    validOrderCount: 0,
    orderCompletionRate: 0,
    validOrderCountList: '',
    orderCountList: '',
    dateList: ''
})
const props = defineProps({
    searchDate: {
        type: Object,
    }
})

onMounted(() => {
    render()
})

watch([props.searchDate], (newValue, oldValue) => {
    render()
})

const render = async () => {
    const data = await getuserStatistics()
    var chartDom = document.getElementById("order")!
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'axis', // 触发提示方式
        },
        legend: {
            show: true,
            top: 'bottom',
            data: ['订单总数', '有效订单']
        },
        grid: {
            top: 20 //整个图表距离上边的距离
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, //坐标轴两边留白,把x轴数据卡在坎下
            data: data?.dateList,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '订单总数',
                data: data?.orderCountList,
                type: 'line',
                showSymbol: false, //未显示鼠标上移的圆点
                symbolSize: 10, //圆点大小
                lineStyle: {
                    color: 'rgba(255, 208, 0)' //线条颜色
                },
                itemStyle: {
                    color: 'rgba(255, 208, 0)' //提示时点的颜色
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.5)', //提示框背景色
                    textStyle: {
                        color: '#fff' //提示框字体颜色
                    }
                }
            },
            {
                name: '有效订单',
                data: data?.validOrderCountList,
                type: 'line',
                showSymbol: false, //未显示鼠标上移的圆点
                symbolSize: 10,
                lineStyle: {
                    color: 'rgba(255, 139, 139)' //线条颜色
                },
                itemStyle: {
                    color: 'rgba(255, 139, 139)' //提示时点的颜色
                },

            }
        ]
    };
    myChart.setOption(option);
}
const getuserStatistics = async () => {
    const begin = props.searchDate?.begin
    const end = props.searchDate?.end

    const res = await statisticAPI.ordersStatistics({ begin, end })
    if (res.code == 1) {
        data.value.totalOrderCount = res.data.totalOrderCount
        data.value.validOrderCount = res.data.validOrderCount
        data.value.orderCompletionRate = res.data.orderCompletionRate
        console.log(data.value);

        return {
            dateList: res.data.dateList.split(','),
            orderCountList: res.data.orderCountList.split(','),
            validOrderCountList: res.data.validOrderCountList.split(','),
            totalOrderCount: res.data.totalOrderCount,
            validOrderCount: res.data.validOrderCount,
            orderCompletionRate: res.data.orderCompletionRate
        }
    }

}

</script>
<style scoped lang="scss">
.rate-wrap {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #666666;

    .rate-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;

        .num {
            font-size: 16px;
            color: #000000;
            font-weight: bold;
        }
    }
}
</style>